<template>
    <div id="app">
     <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                    <!-- logo背景图片区域 -->
                    <div class="layout-logo">
                    </div>
                    <!-- 顶部导航区域 -->
                    <div class="layout-nav">
                        <MenuItem name="1">
                            <Icon type="md-home" />
                            <router-link to="/">系统首页</router-link>
                        </MenuItem>
                        <MenuItem name="2">
                        <Icon type="ios-book-outline" />
                            <a href="javascript:;">信息</a>
                        </MenuItem>
                        <MenuItem name="3">
                        <Icon type="ios-hammer" />
                            <a href="javascript:;">个人设置</a>
                        </MenuItem>
                        <MenuItem name="4" >
                            <Icon type="ios-contact" />
                            <span v-show="change"  style="color:black;font-size:14px">
                                <a href="javascript:;" @click="login" style="margin-right:10px">登录</a>
                                <a href="javascript:;" @click="reg"  >注册</a>
                            </span>
                            <span v-show="!change" style="color:black;margin-right:5px;">{{ use }} </span>

                            <a href="javascript:;" v-show="!change" @click="esc"><Icon type="md-close-circle" /> 退出</a>
                            <Modal
                                :title="titles"
                                v-model="modal7"
                                :closable="false"
                                @on-ok="ok"
                                @on-cancel="cancel"
                                style="text-align:center">
                                 <Form ref="formInline" v-show="change1" :model="formInline" :rules="ruleInline" inline>
                                    <FormItem prop="username">
                                        <Input type="text" v-model="formInline.username" placeholder="用户名" style="width:300px;margin-top:40px;">
                                            <Icon type="ios-person-outline" slot="prepend"></Icon>
                                        </Input>
                                    </FormItem>
                                    <br>
                                    <FormItem prop="password">
                                        <Input type="password" v-model="formInline.password" placeholder="密码" style="width:300px">
                                            <Icon type="ios-lock-outline" slot="prepend"></Icon>
                                        </Input>
                                    </FormItem>
                                </Form>
                                <Form :model="formItem" v-show="!change1" :label-width="80">
                                    <FormItem label="用户名：">
                                        <Input v-model="formItem.username" placeholder="Enter something..."></Input>
                                    </FormItem>
                                    <FormItem label="密码：">
                                        <Input v-model="formItem.password" placeholder="请输入数字"></Input>
                                    </FormItem>
                                    <FormItem label="学号：">
                                        <Input v-model="formItem.studentId" placeholder="请输入数字"></Input>
                                    </FormItem>
                                    <FormItem label="姓名：">
                                        <Input v-model="formItem.name" placeholder="Enter something..."></Input>
                                    </FormItem>
                                    <FormItem label="性别：">
                                        <Input v-model="formItem.sex" placeholder="Enter something..."></Input>
                                    </FormItem>
                                    <FormItem label="年龄：">
                                        <Input v-model="formItem.age" placeholder="请输入数字"></Input>
                                    </FormItem>
                                    <FormItem label="手机号：">
                                        <Input v-model="formItem.phone" placeholder="请输入数字"></Input>
                                    </FormItem>
                                    <FormItem label="电子邮箱：">
                                        <Input v-model="formItem.email" placeholder="Enter something..."></Input>
                                    </FormItem>
                                    <FormItem label="联系地址：">
                                        <Input v-model="formItem.address" placeholder="Enter something..."></Input>
                                    </FormItem>
                                </Form>
                            </Modal>
                        </MenuItem>

                    </div>
                </Menu>
            </Header>

            <Layout :style="{padding: '0px 50px'}">
                <!-- 左侧导航区域 -->
                <Breadcrumb :style="{margin: '16px 0',padding: '0px 20px'}">
                    <BreadcrumbItem id="font">校园后台系统管理</BreadcrumbItem>
                </Breadcrumb>
                <Content :style="{padding: '10px 0', minHeight: '280px', background: '#fff' ,height:'740px'}">
                    <Layout>
                        <Sider hide-trigger collapsible on-collapse :style="{padding: '20px 0',background: '#fff'}">
                                <Menu  :style="{width:'200px'}" >
                                    <Submenu name="1" >
                                        <template slot="title" >
                                          <Icon type="ios-home-outline" />
                                          <router-link to="/">主页</router-link>
                                        </template>
                                    </Submenu>
                                    <Submenu name="2">
                                        <template slot="title">
                                            <Icon type="ios-contact" />
                                            <router-link to="/users">用户管理</router-link>
                                        </template>
                                        <MenuItem name="2-1"><router-link to="/vip" >VIP用户</router-link></MenuItem>
                                        <MenuItem name="2-2"><router-link to="/ordinary" >普通用户</router-link></MenuItem>
                                    </Submenu>
                                    <Submenu name="3">
                                        <template slot="title">
                                          <Icon type="md-list" />
                                            <router-link to="/news">新闻管理</router-link>
                                        </template>
                                            <MenuItem name="3-1">国际新闻</MenuItem>
                                            <MenuItem name="3-2">国内新闻</MenuItem>
                                            <MenuItem name="3-3">班级新闻</MenuItem>
                                            <MenuItem name="3-4">宿舍新闻</MenuItem>
                                    </Submenu>
                                    <Submenu name="4">
                                        <template slot="title">
                                          <Icon type="md-thumbs-up" />
                                            <router-link to="/pl">评论管理</router-link>
                                        </template>
                                        <MenuItem name="4-1">校园环境评论</MenuItem>
                                        <MenuItem name="4-2">食堂就餐评论</MenuItem>
                                        <MenuItem name="4-3">门岗安全评论</MenuItem>
                                        <MenuItem name="4-4">宿舍管理评论</MenuItem>
                                        <MenuItem name="4-5">教学楼环境评论</MenuItem>
                                    </Submenu>
                                    <Submenu name="5">
                                        <template slot="title">
                                          <Icon type="md-reorder" />
                                            <router-link to="/product">产品管理</router-link>
                                        </template>
                                        <MenuItem name="5-1" >电器</MenuItem>
                                        <MenuItem name="5-2">生活用品</MenuItem>
                                        <MenuItem name="5-2">服装</MenuItem>
                                        <MenuItem name="5-2">厨具</MenuItem>
                                    </Submenu>
                                </Menu>
                        </Sider>
                        <!-- 右侧数据表格主体内容区域 -->
                        <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                          token:  {{ token }}
                              <router-view></router-view>
                        </Content>
                    </Layout>
                </Content>
            </Layout>
            <Footer class="layout-footer-center">2011-2016 &copy; TalkingData</Footer>
        </Layout>
    </div>
</template>
<script>
import { mapGetters,mapActions } from 'vuex';
    export default {
        data(){
            return{
                modal7: false,
                change:true,
                change1:true,
                use:"",
                titles:'',
                url:this.$store.state.url,
                formInline: {
                    username: '',
                    password: ''
                },
                ruleInline: {
                    user: [
                        { required: true, message: 'Please fill in the user name', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度至少6位', trigger: 'blur' }
                    ]
                },
                formItem: {
                    user:"",
                    username:"",
                    password:"",
                    studentId:"",
                    name:"",
                    sex:"",
                    age:"",
                    phone:"",
                    email:"",
                    address:""
                },
            }
        },
        computed:{
            ...mapGetters(['token'])
        },
        methods:{
            //退出登录
            esc(){
                this.change = true;

            },
            //登录
            login(){
                this.modal7 = true;
                this.titles = "登录界面"
            },
            reg(){
                this.modal7 = true;
                this.change1 = false;
                this.titles = "注册界面"
            },
            ok () {
                if(this.titles == "登录界面"){
                    this.axios({
                        url:`${this.url}users/login`,
                        method:'post',
                        data:this.formInline
                    }).then(res=>{
                        if(res.data&&res.data!=""){
                            this.$Message.info('登录成功');
                            this.change = false;
                            this.use = res.data.username;
                            this.setToken(res.data.token);
                        }
                    }).catch(res=>{
                        this.$Message.info('账号密码有误');
                    })
                }else if(this.titles == "注册界面"){
                    this.axios({
                        url:`${this.url}users`,
                        method:'post',
                        data:this.formItem
                    }).then((res)=>{
                        this.$Message.info('注册成功');
                        this.login()
                        this.change1 = true;
                    })
                }
            },
            ...mapActions(['setToken']),
            cancel () {
                this.$Message.info('以取消');
            }
        }
    }
</script>
<style lang="scss" scoped>

.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}
.layout-nav{
    float:right;
    margin-right: 20px;
}
.layout-footer-center{
    text-align: center;
}
.layout-logo{
  width:160px;
  height:40px;
  background:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553274001413&di=9c3fdc37233e172a00b1c98ad1164a6d&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fa157d22a8b4a8ba350714913a9ce8fbc17fa5419b3f5-Ih2A7C_fw658') no-repeat 0px -20px;
  background-size:160px 80px;
}
</style>

